import Color from 'color-js';

export default {
  head() {
    return {
      afterNavigation(info) {
        // eslint-disable-next-line no-console
        console.log(info.title);
      },
    };
  },
  data() {
    // const currentPath = this.$route.path;
    // const showHeader = (!isWx || !isAli ) && currentPath !== '/login';
    const showHeader = false;

    return {
      themes: {
        primary: '#046BDE',
      },
      showHeader,
      header: {
        title: '体检预约',
        showBack: true,
        rightPath: '/',
      },
    };
  },
  mounted() {
    const primaryColor = this.$siteConfig.primary;
    if (primaryColor) {
      const hslColor = Color(primaryColor).toHSL();
      const { saturation, lightness } = hslColor;

      const dark = hslColor
        .setSaturation(saturation - 0.2)
        .setLightness(lightness - 0.1)
        .toString();
      const darker = hslColor.setLightness(0.2).toString();
      const light = hslColor
        .setSaturation(saturation - 0.2)
        .setLightness(lightness + 0.35)
        .toString();
      const lighter = hslColor.setLightness(0.96).toString();
      const shadowColor = hslColor.setAlpha(0.3).toString();

      const cssVars = `
    --theme-primary:${primaryColor};
    --theme-primary-dark:${dark};
    --theme-primary-darker:${darker};
    --theme-primary-light:${light};
    --theme-primary-lighter: ${lighter};
    --button-primary-shadow-color:${shadowColor};`;
      document.documentElement.setAttribute('style', cssVars);
      document.documentElement.setAttribute('data-dpr', window.devicePixelRatio || 1);

      this.themes = Object.assign({}, this.themes, {
        primary: primaryColor,
      });
    }
  },
  methods: {
    i18nRender(key, fallback) {
      return this.$tv(key, fallback);
    },
    setHeader(options = {}) {
      this.header = { ...this.header, ...options };
    },
  },
};
